<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="name" label="姓名" prop="name">
      <a-input
        v-model="form.name"
        @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="work" label="任职单位" prop="work">
      <a-input
        v-model="form.work"
        @blur="
          () => {
            $refs.work.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="position" label="职位" prop="position">
      <a-input
        v-model="form.position"
        @blur="
          () => {
            $refs.position.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="school" label="学校名称" prop="school">
      <a-input
        v-model="form.school"
        @blur="
          () => {
            $refs.school.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="major" label="专业名称" prop="major">
      <a-input
        v-model="form.major"
        @blur="
          () => {
            $refs.major.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="cadre" label="干部名称" prop="cadre">
      <a-input
        v-model="form.cadre"
        @blur="
          () => {
            $refs.cadre.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="certificate" label="获奖证书" prop="certificate">
      <a-input
        v-model="form.certificate"
        @blur="
          () => {
            $refs.certificate.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="witness" label="证明人" prop="witness">
      <a-input
        v-model="form.witness"
        @blur="
          () => {
            $refs.witness.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <a-form-model-item ref="telnumber" style="number" label="联系电话" prop="telnumber">
      <a-input
        v-model="form.telnumber"
        @blur="
          () => {
            $refs.telnumber.onFieldBlur();
          }
        "
      />
    </a-form-model-item>

    <!-- <a-form-model-item label="Activity time" required prop="date1">
      <a-date-picker
        v-model="form.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%;"
      />
    </a-form-model-item> -->
    <!-- <a-form-model-item label="Instant delivery" prop="delivery">
      <a-switch v-model="form.delivery" />
    </a-form-model-item> -->
    <!-- <a-form-model-item label="Activity type" prop="type">
      <a-checkbox-group v-model="form.type">
        <a-checkbox value="1" name="type">
          Online
        </a-checkbox>
        <a-checkbox value="2" name="type">
          Promotion
        </a-checkbox>
        <a-checkbox value="3" name="type">
          Offline
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item> -->
    <!-- <a-form-model-item label="Resources" prop="resource">
      <a-radio-group v-model="form.resource">
        <a-radio value="1">
          Sponsor
        </a-radio>
        <a-radio value="2">
          Venue
        </a-radio>
      </a-radio-group>
    </a-form-model-item> -->
    <a-form-model-item label="备注" prop="desc">
      <a-input v-model="form.desc" type="textarea" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        提交
      </a-button>
      <!-- <a-button style="margin-left: 10px;" @click="resetForm">
        Reset
      </a-button> -->
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        name: '',
        // region: undefined,
        // date1: undefined,
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: '',
        telnumber:''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2到10个汉字', trigger: 'blur' },
        ],
        work: [
          { required: true, message: '请输入任职单位', trigger: 'blur' },
          { min: 0, max: 30, message: '请输入低于30个汉字', trigger: 'blur' },
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          { min: 0, max: 30, message: '请输入低于30个汉字', trigger: 'blur' },
        ],
        school: [
          { required: true, message: '请输入学校名称', trigger: 'blur' },
          { min: 0, max: 10, message: '请输入低于10个汉字', trigger: 'blur' },
        ],
        major: [
          { required: true, message: '请输入专业名称', trigger: 'blur' },
          { min: 0, max: 20, message: '请输入低于20个汉字', trigger: 'blur' },
        ],
        cadre: [
          { required: true, message: '请输入干部名称', trigger: 'blur' },
          { min: 0, max: 20, message: '请输入低于20个汉字', trigger: 'blur' },
        ],
        certificate: [
          { required: true, message: '请输入获奖证书', trigger: 'blur' },
          { min: 0, max: 30, message: '请输入低于30个汉字', trigger: 'blur' },
        ],
        witness: [
          { required: true, message: '请输入证明人', trigger: 'blur' },
          { min: 0, max: 30, message: '请输入低于30个汉字', trigger: 'blur' },
        ],
        telnumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
           { min: 0, max: 11, message: '请输入11位电话号码', trigger: 'blur' },
        ],
        // region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        // date1: [{ required: true, message: 'Please pick a date', trigger:'change' }],
        // type: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: 'Please select at least one activity type',
        //     trigger: 'change',
        //   },
        // ],
        // resource: [
        //   { required: true, message: 'Please select activity resource', trigger: 'change' },
        // ],
        // desc: [{ required: true, message: '请填写备注', trigger: 'blur' }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('已提交！');
        } else {
          console.log('提交失败！');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
